<template>
	<view>
		<view
			style="width: 702rpx;border-radius: 24rpx; padding-top: 12rpx;padding-bottom: 12rpx;background-color: #FFFFFF;margin: 0 auto;margin-top: 20rpx;">
			<u-search @search='getallcity' @custom='getallcity' placeholder="请输入城市名称" bg-color='#FFFFFF'
				:show-action='false' input-align='center' v-model="keyword"></u-search>
		</view>
		<view v-if="isloding" style="text-align: center;margin-top: 50rpx;">
			<u-loading size="36"></u-loading>
		</view>
		<view class="hot" v-if="!isloding">
			<view class="hot_top">热门城市：</view>
			<view style="display: flex;flex-wrap: wrap;margin-left: -30rpx;margin-top: 20rpx;">
				<view v-for="(item,index) in hotlist" :key="index" class="hot_city" @click="change_city(item)">
					{{item.region_name}}
				</view>
			</view>
		</view>
		<view style="margin-top: 36rpx;">
			<u-index-list :scrollTop="scrollTop" v-if="!isloding&&list.length != 0" :index-list='indexlist'>
				<view v-for="(item, index) in list" :key="index">
					<u-index-anchor :index="item.id" />
					<view class="list-cell" v-for="(item2,index2) in item.data" :key="index2"
						@click="change_city(item2)">
						{{item2.region_name}}
					</view>
				</view>
			</u-index-list>
			<view v-if="!isloding&&list.length == 0"
				style="text-align: center;margin-top: 70rpx;font-size: 30rpx;font-weight: bold;">
				搜索城市内容为空~
			</view>
		</view>
	</view>
</template>

<script>
	import {
		allCity,
		hotCity,
		cityname
	} from '@/api/home.js'
	export default {
		data() {
			return {
				list: [],
				hotlist: [],
				scrollTop: 0,
				isloding: true,
				indexlist: [],
				keyword: ''
			};
		},
		async onLoad() {
			await this.getallcity()
			await this.gethotcity()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//获取城市简称
			async getcityname(name) {
				const {
					data
				} = await cityname({
					full_name: name
				})
				this.location = data
				// this.location = '绍兴'
				// this.$store.commit('SETLOCATION', this.location)
				// this.$store.commit('app/SETLOCATION', this.location)
				this.getPaper()
			},
			async getallcity() {
				this.list = []
				this.indexlist = []
				const {
					data
				} = await allCity({
					keyword: this.keyword
				})
				this.list = data
				for (let i in this.list) {
					this.indexlist.push(this.list[i].id)
				}
			},
			async gethotcity() {
				const {
					data
				} = await hotCity()
				this.hotlist = data
				this.isloding = false
			},
			change_city(item) {
				getApp().globalData.name = item.region_name;
				uni.switchTab({
					url: '/pages/tabbar/home/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 34rpx;
		line-height: 24px;
		background-color: #fff;
	}

	.hot {
		margin-top: 24rpx;
		margin-left: 55rpx;
		width: 680rpx;

		.hot_top {
			font-size: 40rpx;
			font-weight: bold;
		}

		.hot_city {
			font-size: 34rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			width: 190rpx;
			height: 80rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>